<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>fingerprintjs2</title>
</head>
<body>
  
  <div id="fp"></div>
  <br>
  <div id="box"></div>

  <script src="http://unpkg.com/@fingerprintjs/fingerprintjs@2/dist/fingerprint2.min.js">
  </script>
  <script>
    function genResultOnPage(components) {
      const boxDom = document.getElementById('box')
      let str = ''
      components.map(item => {
        str += item['key'] +':'+ item['value'] + '<br/>'
      })
      boxDom.innerHTML = str
    }

    function geResult() {
      const customOptions = {
        // excludes: {touchSupport: true}
      }
      const options = Object.assign({}, customOptions)

      // options自定义配置项
      Fingerprint2.get(options,function (components) {
        // components为计算指纹时所使用到的组件数组 [{key: ..., value: ...}]
        console.log(components) 
        // 创建哈希指纹
        var values = components.map(function (component) { return component.value })
        // result 计算出来的指纹ID
        var result = Fingerprint2.x64hash128(values.join(''), 31) 
        document.getElementById('fp').innerHTML = result
        console.log(result) 
        genResultOnPage(components)
      })
    }

    if (window.requestIdleCallback) {
      requestIdleCallback(function () {
        geResult()  
      })
    } else {
      setTimeout(function () {
        geResult()
      }, 500)
    }
  </script>
</body>
</html>
